<template>
  <div class="slot-demo">
    <MyButton type="warm" />

    <MyButton className="edit" type="编辑" />

    <MyButton type="danger" text="删除" @click="del" />

    <MyPannel title="小标题" body="小标题内容" />

    <!-- <MyPannel title="小标题" body="">
      <template v-slot>
        <img src="https://cn.vuejs.org/images/logo.svg" alt="" />
        <span>调用组件时自定义的结构</span>
      </template>
    </MyPannel> -->

    <MyPannel title="小标题" body="">
      <img src="https://cn.vuejs.org/images/logo.svg" alt="" />
      <span>调用组件时自定义的结构</span>

      <template v-slot:foot>
        <p>这里是底部</p>
      </template>
    </MyPannel>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
import MyPannel from "./MyPannel.vue";
export default {
  name: "SlotDemo",
  components: {
    MyButton,
    MyPannel,
  },
  methods: {
    del() {
      console.log("删除");
    },
  },
};
</script>

<style lang="scss" scoped>
.edit {
  background: green;
}
</style>